<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>select无限极联动</title>
</head>

<body>
    <div id="custom_data">
        <select name="first" class="first"></select>
        <select name="second" class="second" style="display:none"></select>
        <select name="third" class="third" style="display:none"></select>
        <select name="fourth" class="fourth" style="display:none"></select>
        <select name="fifth" class="fifth" style="display:none"></select>
        <select name="six" class="six" style="display:none"></select>
    </div>

	<!-- 以下是有默认值的 -->
    <div id="default_data">
        <select name="first" class="first">
	        <option value="2" selected>美国</option>
        </select>
        <select name="second" class="second">
	        <option value="3000" selected>夏威夷州</option>
        </select>
        <select name="third" class="third">
	        <option value="3002" selected>国家公园</option>
        </select>
        <select name="fourth" class="fourth" style="display:none"></select>
        <select name="fifth" class="fifth" style="display:none"></select>
        <select name="six" class="six" style="display:none"></select>
    </div>
    <script src="http://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/jquery.cxselect.js"></script>
    <script type="text/javascript">
    var dataCustom = [{
            'id': '1',
            'n': '中国',
            's': [{
                'id': '1002',
                'n': '福建省',
                's': [{
                    'id': '1003',
                    'n': '厦门市',
                    's': [{
                        'id': '1004',
                        'n': '海沧区',
                        's': [{
                            'id': '1005',
                            'n': '东孚街道',
                            's': [
                                { 'id': '1006', 'n': '玛瑙村' },
                                { 'id': '1007', 'n': '山后村' }
                            ]
                        },{
                            'id': '1008',
                            'n': '嵩屿街道',
                            's': [
                                { 'id': '1010', 'n': '岭上村' },
                                { 'id': '1011', 'n': '贞庵村' }
                            ]
                        }]
                    }]
                }]
            }]
        },
        {
            'id': '2',
            'n': '美国',
            's': [{
                    'id': '2000',
                    'n': '加利福尼亚州',
                    's': [
                        { 'id': '2001', 'n': '麦卡镇' },
                        { 'id': '2002', 'n': '活塞镇' }
                    ]
                },
                {
                    'id': '3000',
                    'n': '夏威夷州',
                    's': [
                        { 'id': 3001, 'n': '火奴鲁鲁' },
                        { 'id': 3002, 'n': '国家公园' },
                        { 'id': 3003, 'n': '国际机场' }
                    ]
                }
            ]
        },
        { 'id': '3', 'n': '日本' }
    ];




    $('#custom_data').cxSelect({
        selects: ['first', 'second', 'third', 'fourth', 'fifth','six'],
        // required: true,
        jsonValue: 'id',
        data: dataCustom,
        emptyStyle: 'none'
    });




    // 有默认值时
    $('#default_data').cxSelect({
        selects: ['first', 'second', 'third', 'fourth', 'fifth','six'],
        // required: true,
        jsonValue: 'id',
        data: dataCustom,
        emptyStyle: 'none'
    });
    </script>
</body>

</html>